<template>
  <div>
    <div>
      <!--    面包屑导航区-->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>志愿模块</el-breadcrumb-item>
        <el-breadcrumb-item>志愿活动</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="margin-top: 20px">
      <el-tabs v-model="index" @tab-click="handleClick">
        <el-tab-pane label="活动报名" name="0"></el-tab-pane>
        <el-tab-pane label="报名纪录" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="index === '0'" class="container">
      <div class="card" v-if="this.volunteerList.length === 0">
        暂无数据
      </div>
      <div class="card" v-if="this.volunteerList.length > 0">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item,index) in volunteerList">
            <div class="grid-content bg-purple">
              <div class="pricing pricing-highlight">
                <div class="pricing-title">
                  <font size="4">{{item.volunteerName}}</font>
                </div>
                <div class="pricing-padding">
                  <div class="pricing-price">
                    <div><font size="2">{{item.volunteerContent}}</font></div>
                  </div>
                  <div class="pricing-details">
                    <div class="pricing-item">
                      <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                      <div class="pricing-item-label">活动内容：{{item.volunteerContent}}</div>
                    </div>

                    <div class="pricing-item">
                      <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                      <div class="pricing-item-label">活动地点：{{item.volunteerArea}}</div>
                    </div>

                    <div class="pricing-item">
                      <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                      <div class="pricing-item-label">参与奖励：{{item.point}} 积分</div>
                    </div>

                    <div class="pricing-item">
                      <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                      <div class="pricing-item-label">可报名人数：{{item.number - item.participateNumber}}</div>
                    </div>

                    <div class="pricing-item">
                      <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                      <div class="pricing-item-label">活动时间: {{item.startTime}}</div>
                    </div>
                    <div class="pricing-item">
                      <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                      <div class="pricing-item-label">报名结束时间: {{item.endTime}}</div>
                    </div>

                  </div>
                </div>
                <div class="pricing-cta" v-if="item.applicationFlag >= 1">
                  <a href="javascript:void(0);" data-toggle="modal"  data-target="#legacy-modal-1"  style="background-color: #6c757d;">已参与 </a>
                </div>
                <div class="pricing-cta" v-else-if="item.number - item.participateNumber <= 0">
                  <a href="javascript:void(0);" data-toggle="modal"  data-target="#legacy-modal-1"  style="background-color: #6c757d;">人数已满 </a>
                </div>

                <div class="pricing-cta" v-else-if="item.number - item.participateNumber > 0">
                  <a href="javascript:void(0);" data-toggle="modal" class="exchangeBtn" data-target="#legacy-modal-1" @click="application(item)">报名 <i class="el-icon-right fas fa-arrow-right" style="font-size: 20px"></i></a>
                </div>

              </div>
            </div></el-col>
        </el-row>
      </div>
    </div>

    <div v-if="index === '1'" class="container">
      <div class="card">
        <div class="card-header">
          <h4>报名记录</h4>
        </div>

        <div class="card-body">
          <el-table
            :data="volunteerLogList"
            border
            stripe
            style="width: 100%">
            <el-table-column type="index"  align="center"></el-table-column>
            <el-table-column
              prop="volunteerName"
              label="活动名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="volunteerContent"
              align="center"
              label="活动内容">
            </el-table-column>
            <el-table-column
              prop="volunteerArea"
              label="活动地点"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="活动时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="是否参与"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == '0'" >待参与</el-tag>
                <el-tag v-if="scope.row.status == '1'" type="success">已参与</el-tag>
              </template>
            </el-table-column>

          </el-table>

          <el-pagination
            @size-change="getList"
            @current-change="getList"
            :current-page.sync="queryParams.pageNum"
            :page-sizes="[1, 5, 10]"
            :page-size.sync="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
import { allVolunteerList, application, allVolunteerLogList } from '@/api/volunteer'

export default {
  name: 'volunteerActivities',
  data () { // 选项 / 数据
    return {
      volunteerList: [],
      volunteerLogList: [],
      index: '0',
      total: undefined,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  methods: {
    routeChange: function () { // 展示页面信息
      const that = this
      if (this.index === '0') {
        allVolunteerList().then((response) => {
          that.volunteerList = response.list
        }).catch(() => { })
      }
      if (this.index === '1') {
        that.getList()
      }
    },
    getList: function () {
      const that = this
      allVolunteerLogList(that.queryParams).then((response) => {
        that.volunteerLogList = response.list
        that.total = response.total
      }).catch(() => { })
    },
    application: function (item) {
      const that = this
      this.$confirm('是否要报名' + item.volunteerName + '活动', '报名提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 兑换商品
        application(item.id).then((response) => {
          if (response.code) {
            this.$alert(response.msg, '错误提示', {
              confirmButtonText: '确定',
              type: 'error'
            }).then(() => {
              window.location.reload()
            })
          } else {
            this.$alert('你已成功报名' + item.volunteerName + '活动', '报名成功', {
              confirmButtonText: '确定',
              type: 'success'
            }).then(() => {
              window.location.reload()
            })
          }
        }).catch(() => {
          //
        })
      }).catch(() => { })
    },
    handleClick (tab, event) {
      this.routeChange()
    }
  },
  created () {
    this.routeChange()
  }
}
</script>

<style scoped>
.section-title {
  font-size: 18px;
  color: #191d21;
  font-weight: 600;
  position: relative;
  margin: 30px 0 25px;
}

.section-title:before {
  content: ' ';
  border-radius: 5px;
  height: 8px;
  width: 30px;
  background-color: #6777ef;
  display: inline-block;
  float: left;
  margin-top: 6px;
  margin-right: 15px;
}

.container {
  padding-top: 10px;
}

.pricing {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .03);
  background-color: #fff;
  border-radius: 3px;
  border: none;
  position: relative;
  margin-bottom: 30px;
  text-align: center;
}

.pricing {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .03);
  background-color: #fff;
  border-radius: 3px;
  border: none;
  position: relative;
  margin-bottom: 30px;
  text-align: center
}

.pricing.pricing-highlight .pricing-title {
  background-color: #6777ef;
  color: #fff
}

.pricing.pricing-highlight .pricing-cta a {
  background-color: #6777ef;
  color: #fff
}

.exchangeBtn:hover {
  background-color: #394eea !important
}

.pricing .pricing-padding {
  padding: 40px
}

.pricing .pricing-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  background-color: #f3f6f8;
  color: #6777ef;
  border-radius: 0 0 3px 3px;
  display: inline-block;
  padding: 5px 15px
}

.pricing .pricing-price {
  margin-bottom: 45px
}

.pricing .pricing-price div:first-child {
  font-weight: 600;
  font-size: 50px
}

.pricing .pricing-details {
  text-align: left;
  display: inline-block
}

.pricing .pricing-details .pricing-item {
  display: flex;
  margin-bottom: 15px
}

.pricing .pricing-details .pricing-item .pricing-item-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  background-color: #63ed7a;
  color: #fff;
  margin-right: 10px
}

.pricing .pricing-details .pricing-item .pricing-item-icon i {
  font-size: 11px
}

.pricing .pricing-cta {
  margin-top: 20px
}

.pricing .pricing-cta a {
  display: block;
  padding: 20px 40px;
  background-color: #f3f6f8;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 3px 3px
}

.pricing .pricing-cta a .fas, .pricing .pricing-cta a .far, .pricing .pricing-cta a .fab, .pricing .pricing-cta a .fal, .pricing .pricing-cta a .ion {
  margin-left: 5px
}

.pricing .pricing-cta a:hover {
  background-color: #e3eaef
}

</style>
